<template>
  <Modal
    v-model:active="solverCardModelVueActive"
    transfer
    title="求解卡片"
    :width="480"
    confirm-text="确定"
  >
    <ConfigProvider :props="providedProps">
      <Form :model="formModel" style="padding: 24px">
        <Column :span="21" :offset="3">
          <FormItem label="卡片类型：" prop="type">
            <Select
              v-model:value="formModel.type"
              :options="selectTypeOptions"
              placeholder="请选择卡片类型"
            ></Select>
          </FormItem>
        </Column>
        <Column :span="21" :offset="3" v-if="formModel.type === 'SOL'">
          <FormItem label="SOL类型：" prop="SOLtype">
            <Select
              v-model:value="formModel.type"
              :options="selectTypeOptions"
              placeholder="请选择SOL类型"
            ></Select>
          </FormItem>
        </Column>
        <Column
          :span="21"
          :offset="3"
          v-if="formModel.type === 'GLOBAL_OUTPUT_REQUEST'"
        >
          <FormItem label="输出选择：" prop="values">
            <Select
              v-model:value="formModel.values"
              :options="selectTypeOptions"
              placeholder="请选择输出选择"
              option-check
              multiple
            ></Select>
          </FormItem>
        </Column>
        <Column :span="21" :offset="3" v-if="formModel.type === 'PARAM'">
          <FormItem label="参数：" prop="values"> </FormItem>
        </Column>
        <Column :span="21" :offset="3" v-if="formModel.type === 'PARAM'">
          <FormItem label="AUTOSPEC：" prop="AUTOSPEC">
            <Checkbox
              v-model:checked="formModel.AUTOSPEC"
              style="margin-right: 16px"
            ></Checkbox>
            <Select
              v-model:value="formModel.AUTOSPECtype"
              :options="selectTypeOptions"
              placeholder="请选择AUTOSPEC"
              :disabled="!formModel.AUTOSPEC"
            ></Select>
          </FormItem>
        </Column>
        <Column :span="21" :offset="3" v-if="formModel.type === 'PARAM'">
          <FormItem label="COUPM_V1" prop="COUPM_V1">
            <Checkbox
              v-model:checked="formModel.COUPM_V1"
              style="margin-right: 16px"
            ></Checkbox>
            <Input
              v-model:value="formModel.COUPM_V1Input"
              :disabled="!formModel.COUPM_V1"
            ></Input>
          </FormItem>
        </Column>
        <Column :span="21" :offset="3" v-if="formModel.type === 'PARAM'">
          <FormItem label="POST_V1：" prop="POST_V1">
            <Checkbox
              v-model:checked="formModel.POST_V1"
              style="margin-right: 16px"
            ></Checkbox>
            <Input
              v-model:value="formModel.POST_V1Input"
              :disabled="!formModel.POST_V1"
            ></Input>
          </FormItem>
        </Column>
      </Form>
    </ConfigProvider>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Checkbox,
  Row,
  Column,
  Input,
  RadioGroup,
  Radio,
  Upload,
  Button,
  NumberInput,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore } from "@/UI/store";

let { solverCardModelVueActive } = storeToRefs(useCoreStore());
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
const formModel = reactive({
  type: "",
  SOLtype: "",
  values: [],
  AUTOSPEC: false,
  COUPM_V1: false,
  POST_V1: false,
  AUTOSPECtype: "",
  COUPM_V1Input: "",
  POST_V1Input: "",
});
const selectTypeOptions = [
  {
    label: "SOL",
    value: "SOL",
  },
  {
    label: "PARAM",
    value: "PARAM",
  },
  {
    label: "GLOBAL_OUTPUT_REQUEST",
    value: "GLOBAL_OUTPUT_REQUEST",
  },
];
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
